<template>
  <div class="my-layout">
      <Card>
          <Form ref="searchForm" :model="queryParam" inline :label-width="70" class="search-form">
              <Form-item label="内容" prop="originalContent">
                  <Input type="text" v-model="queryParam.originalContent" placeholder="内容" clearable style="width: 200px" />
              </Form-item>
              <Button @click="handleQuert()" type="primary" icon="ios-search" size="small" class="search-btn">搜索</Button>
              <Button @click="handleQuert(true)" type="primary" icon="ios-refresh" size="small" class="search-btn">重置</Button>
          </Form>
          <div class="table-operate-area">
              <Button @click="handleDeleteBench" size="small" type="primary" >批量删除</Button>
          </div>
          <Table
            :highlight-row="true"
            :loading="loading" border :columns="columns" :data="dataSource" ref="table" class="show-article-comment-table" @on-selection-change="onSelectChange">

            <template #showContent="{ row }">
              <div class="show-content">
                <div class="main-content" @click="showDetial(row)">
                  <div class="head-show">
                    <img :src="row.memberFace" alt="">
                  </div>
                  <div class="conent-show">
                    <span>{{ row.content }}</span>
                  </div>
                </div>
                <div class="foot-view">
                  <span>
                    {{ row.memberNickName }}
                  </span>
                  <span>
                    {{ row.memberMobile }}
                  </span>
                  <span>
                    {{ row.createTime }}
                  </span>
                  <span>
                    <a @click="showDetialYw(row)">查看原文</a>
                  </span>
                </div>
              </div>
            </template>
          </Table>
          <Row type="flex" justify="end" class="mt_10">
              <Page v-bind="pageOption" v-on="pageListener" :transfer="true"></Page>
          </Row>
      </Card>
      <ArticleSubComment ref="articleSubComment"/>
      <ArticleCommentDetailModal ref="articleCommentDetailModal"/>
  </div>
</template>

<script>
import { SimpleTableMixins } from '@/mixins/SimpleTableMixins.js'
import { getArticleComment, articleCommentDelete } from "@/api/pages";
import ArticleSubComment from './ArticleSubComment'
import ArticleCommentDetailModal from './ArticleCommentDetailModal'

export default {
  mixins: [SimpleTableMixins],
  components: {
    ArticleSubComment,
    ArticleCommentDetailModal
  },
  data() {
      let that = this
      return {
          baseParam: {
              sort: "create_time", // 默认排序字段
              order: "desc", // 默认排序方式
          },
          action: {
              listAction: getArticleComment,
              deleteBenchAction: articleCommentDelete
          },
          columns: [
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
              title: "评论列表",
              align: 'center',
              key: "memberNickName",
              // width: 100,
              slot: 'showContent',
            },
            // {
            //   title: "会员手机号",
            //   key: "memberMobile",
            //   width: 100,
            // },
            // {
            //   title: "评论内容-原文",
            //   key: "originalContent",
            //   minWidth: 100,
            // },
            // {
            //   title: "创建日期",
            //   key: "createTime",
            //   align: "left",
            //   width: 190,
            //   sortable: false,
            // },
          ],
          beanInfo: {}
      };
  },
  methods: {
    handleQuert(flag) {
      this.reloadData(flag)
      if(this.$refs.articleSubComment) {
        this.$refs.articleSubComment.reset(record)
      }
    },
    showDetial(record) {
      this.$refs.articleSubComment.show(record)
    },
    showDetialYw(record) {
      this.$refs.articleSubComment.show(record)
      this.$refs.articleCommentDetailModal.show({...record})
    },
    handleDeleteBench() {
      let selectRows = this.selectRows
      if(selectRows.length === 0) {
        this.$Message.warning('请选择要删除的数据!')
        return
      }

      this.$Modal.confirm({
          title: '确认',
          content: '是否确认删除',
          onOk: () => {
            let ids = selectRows.map(item=>{
              return item.id
            })
            this._deleteAction(ids)
          },
          onCancel: () => {
              // this.$Message.info('Clicked cancel');
          }
      });
    },
    reload() {
      this.reloadData()
    }
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
@import "./style.scss";
.show-content{
  .main-content{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .head-show{
      width: 40px;
      height: 40px;
      border-radius: 40px;
      border: 1px solid #7d7d7d;
      overflow: hidden;
      img{
        height: 100%;
        width: 100%;
      }
    }
    .conent-show{
      height: 50px;
      text-align: left;
      padding: 10px 5px;
      width: calc(100% - 50px);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 限制为两行 */
      line-clamp: 2;
      line-height: 20px;
      white-space: normal;
    }
  }
  .foot-view{
    float: right;
    &>span{
      margin-left: 10px;
    }
  }
}
.table-operate-area{
  margin-bottom: 5px;
}
.my-layout{
  display: flex;
  justify-content: space-around;
  &>*{
    width: 49%;
  }
  // :deep(.ivu-table-body){
  //   max-height: 735px;
  // }
}
</style>
